<template>
	<view class="wrap">
		<scroll-view class="menu-scroll"
			scroll-x="true"
			enable-flex>



			<view class="wt-item"
				:style="{backgroundColor: backgroundColor}"
				v-for="item in itemList"
				:key="item._id">


				<video v-if="videoId==item.vid"
					:id="item.vid"
					:src="item.vid"
					:show-fullscreen-btn="false"
					object-fit="fill"
					class="video-common"
					@tap="handlePlay"
					@timeupdate="handleUpdate"
					@ended="handleEnded"></video>
				<!--  -->
				<template v-else>
					<image :id="item.vid"
						:src="item.coverpic"
						@tap="handlePlay"></image>

					<text class="ready-to-play">可播放</text>
				</template>

				<view @tap="toMenuDetail"
					:id="item._id">
					<text>{{item.name}}</text>



					<view class="item-row">
						<view class="row-item">
							<text>{{item.pageview | valueFilter}}</text>
							<image src="../../static/img/caipusousuo_slices/mengbanzu278.png"
								mode=""></image>
						</view>
						<view class="row-item">
							<text>{{item.collections | valueFilter}}</text>
							<image src="../../static/img/home/favorite.png"
								mode=""></image>
						</view>
					</view>
				</view>

			</view>





		</scroll-view>
	</view>


</template>

<script>
	export default {
		name: "menu-scroll",
		props: {
			backgroundColor: {
				default: '#fff'
			},
			itemList: {
				type: Array
			},
			isVip: {
				type: Boolean,
				default: false
			}
		},
		// created() {
		// 	console.log(this.itemList);	
		// },
		data() {
			return {
				videoId: '',
				videoPlaytime: [],
				userInfo:null
			};
		},
		mounted() {
				this.userInfo = getApp().globalData.userInfo;
		},
		methods: {
			toMenuDetail(e) {
				// console.log(this.isVip);
					uni.navigateTo({
						url: '/pages/menu-detail/menu-detail?id=' + e.currentTarget.id
					})
				
			},


			handlePlay(e) {
				if(this.isVip && !this.userInfo.vip){
						uni.showToast({
							title:'仅会员观看',
							icon:'error',
						})
						return;
				}
				let vid = e.currentTarget.id;

				this.videoId = vid;
				this.videoContext = uni.createVideoContext(vid, this);
				this.videoContext.requestFullScreen({ direction: 90 });
				let videoPlaytime = this.videoPlaytime;
				// console.log('所有播放数据的数组', videoPlaytime);
				let videoItem = videoPlaytime.find((item) => item.vid == vid);
				// console.log('上次播放的数据', videoItem);

				if (videoItem) {
					this.videoContext.seek(videoItem.currentTime);
				} else {
					this.videoContext.play();
				}

			},
			handleUpdate(e) {
				// console.log(e);
				let videoObj = {
					vid: e.currentTarget.id,
					currentTime: e.detail.currentTime
				};

				let videoPlaytime = this.videoPlaytime;
				// 判断videoPlaytime 之前有没有记录过当前视频的播放数据
				let videoItem = videoPlaytime.find((item) => item.vid == videoObj.vid);

				if (videoItem) {
					videoItem.currentTime = e.detail.currentTime;
				} else {
					videoPlaytime.push(videoObj);
				}

				this.videoPlaytime = videoPlaytime;



			},
			handleEnded(e) {
				let vid = e.currentTarget.id;
				let videoPlaytime = this.videoPlaytime;
				let index = videoPlaytime.findIndex((item) => item.vid === vid);
				videoPlaytime.splice(index, 1);
				this.videoPlaytime = videoPlaytime;


			},
		
		}
	}
</script>

<style lang="scss"
	scoped>
	.menu-scroll {
		display: flex;
		white-space: nowrap;
		height: calc(332rpx + 52rpx);
		margin-bottom: 50rpx;



		.wt-item {
			position: relative;
			display: inline-flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			width: calc(336rpx + 100rpx);
			height: calc(328rpx + 52rpx);
			margin-right: 10rpx;
			margin-bottom: 36rpx;
			padding: 5rpx 10rpx;
			border-radius: $uni-border-radius-lg;

			&:first-of-type {
				margin-left: 20rpx;
			}

			&:last-of-type {
				padding-right: 10rpx;
				margin-right: 20rpx;
			}

			.video-common {
				width: calc(334rpx + 80rpx);
				height: 300rpx;
				border-radius: $uni-border-radius-lg;
			}

			.ready-to-play {
				position: absolute;
				top: calc(240rpx);
				right: 24rpx;
				width: 120rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				border-radius: 50rpx;
				color: #fff;
				background-color: rgba($color: #000000, $alpha: 0.7);
			}

			image {
				width: calc(334rpx + 80rpx);
				height: 300rpx;
				border-radius: $uni-border-radius-lg;
			}

			text {
				width: calc(334rpx + 80rpx);
				text-align: left;
				font-size: 30rpx;
				color: $uni-text-color-1;
			}

			.item-row {
				width: calc(334rpx + 80rpx);
				display: flex;
				align-items: center;

				.row-item {
					// width: 334rpx;
					display: flex;
					align-items: center;
					margin-right: 60rpx;

					text {
						width: fit-content;
						font-size: 22rpx;
						color: #aaa;
						margin-right: 14rpx;
					}

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}


	}
</style>
